<template>


    <div>
        <el-button size="default" @click="printPage" plain><el-icon>
                <Printer />
            </el-icon>打印</el-button>
        <el-button size="default" @click="add" plain><el-icon>
                <CopyDocument />
            </el-icon>复制</el-button>
        <el-button size="default" @click="Editor" plain><el-icon>
                <Edit />
            </el-icon>编辑</el-button>
        <el-button size="default" @click="open" plain><el-icon>
                <Delete />
            </el-icon>删除</el-button>
        <hr>
        <el-config-provider :locale="zhCn">
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="grid-content ep-bg-purple">
                        <el-descriptions title="" direction="vertical" :column="1" border>
                            <el-descriptions-item label="岗位">品牌运营</el-descriptions-item>
                            <el-descriptions-item label="需要人数">1人</el-descriptions-item>
                            <el-descriptions-item label="所在部门" :span="2">
                                <el-popover placement="right-start" title="" width="200px" trigger="click" content="部门归属：运营部">
                                    <template #reference><el-tag type="primary"><el-icon>
                                                <Paperclip></Paperclip>
                                            </el-icon>运营部</el-tag></template>
                                </el-popover>

                            </el-descriptions-item>
                            <el-descriptions-item label="岗位职责" :span="2">1.全媒体广告审核业务
                                2.承接上级单位和报社交办的品牌类项目策划、执行、统筹等工作；
                                3.负责新媒体账号管理、商标注册及版权登记管理，与其他部门协同，有效使用商标；</el-descriptions-item>
                            <el-descriptions-item label="入职要求" :span="2">1.30岁以下，大学本科及以上学历。
                                2.政治立场坚定，认同拼搏奋进的企业文化，无劳务纠纷等相关问题，中共党员优先。
                                3.具有品牌管理能力，特别是品牌推广策划能力，能够独立完成方案策划、执行、统筹等各环节工作。
                                4.具有良好的策划与沟通能力，较强的语言与文字表达能力，具有全媒体广告审查能力。
                                5.广告、法律、新媒体相关专业，拥有新媒体从业经验和融媒体产品制作能力者优先。</el-descriptions-item>
                        </el-descriptions>

                        <el-descriptions title="" :column="2" direction="vertical">
                            <el-descriptions-item label="提交人">早濑优香</el-descriptions-item>
                            <el-descriptions-item label="提交时间">2025年7月4日16:00:45</el-descriptions-item>
                            <el-descriptions-item label="更新时间" :span="2">2025年7月4日16:00:45</el-descriptions-item>
                        </el-descriptions>
                    </div>

                </el-col>
                <el-col :span="6">
                    <div>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"
                            style="width: 100%;height: 600px;">
                            <el-tab-pane label="数据日志" name="first">

                                <el-empty :image-size="200" description="暂无数据" style="height: 500px;" />
                            </el-tab-pane>
                            <el-tab-pane label="评论" name="second" @click="ping">
                                <div class="comment-section" v-loading="loading" :element-loading-text="'Loading...'"
                                    :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"
                                    element-loading-background="rgba(122, 122, 122, 0.8)">
                                    <el-empty :image-size="200" style="width: 100%; height: 500px;"
                                        description="暂无数据" />
                                    <div class="comment-input">
                                        <el-input style="width: 190px" placeholder="善语结善缘，恶言伤人心" clearable />
                                        &nbsp;
                                        <el-button type="primary">发送</el-button>
                                    </div>
                                </div>
                            </el-tab-pane>

                        </el-tabs>
                    </div>
                </el-col>
            </el-row>
        </el-config-provider>
    </div>
    <!-- 复制添加 -->
    <el-dialog title="添加信息" v-model="isVisible" width="60%" destroy-on-close>
        <hr />
        <Insert v-if="isVisible"></Insert>
    </el-dialog>
    <!-- 修改信息 -->
    <el-dialog title="编辑信息" width="60%" destroy-on-close v-model="VisibleModifications">
        <el-form :model="form" ref="form" label-width="100px">

            <el-form-item label="选择岗位" label-position="top">
                <el-button style="width: 100px;" @click="Position"><el-icon>
                        <List />
                    </el-icon>選擇數據</el-button>
            </el-form-item>
            <el-form-item label="选择人数" label-position="top">
                <el-input-number v-model="num" :min="1" :max="20" />
            </el-form-item>
            <el-form-item label="所在部门" label-position="top">
                <el-button style="width: 100px;"><el-icon>
                        <List />
                    </el-icon>選擇數據</el-button>
            </el-form-item>
            <el-form-item label="岗位职责" label-position="top">
                <el-input v-model="JobResponsibilities" clearable type="textarea" style="width: 560px" :rows="6" />
            </el-form-item>
            <el-form-item label="任职要求" label-position="top">
                <el-input v-model="JobRequirements" clearable type="textarea" style="width: 560px" :rows="6" />

            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <!-- 职位选择 -->
    <el-dialog title="选择数据" v-model="DisplayPosition" width="60%">
        <hr />
        <el-row :gutter="20">
            <el-col :span="19">
                <div class="grid-content ep-bg-purple"></div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content ep-bg-purple-light"><el-input placeholder="搜索" style="width: 120px;" clearable>
                        <template #prefix><el-icon class="el-input__icon">
                                <search />
                            </el-icon></template></el-input>

                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content ep-bg-purple-light"><el-popover class="box-item" content="筛选"
                        placement="bottom">
                        <template #reference><el-button size="default" @click=""><el-icon>
                                    <Filter />
                                </el-icon>筛选</el-button></template>

                    </el-popover>
                </div>
            </el-col>

        </el-row>
        <el-table v-loading="loading" element-loading-text="Loading..." :element-loading-spinner="svg"
            element-loading-svg-view-box="-10, -10, 50, 50" element-loading-background="rgba(122, 122, 122, 0.8)"
            :data="tableData" style="width: 100% ; height: 600px;">
            <el-table-column type="selection" width="50"></el-table-column>


            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">

            </el-table-column>

        </el-table>
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :disabled="disabled" :background="background"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>

        <template #footer>
            <span>
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'
import router from '@/router'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessage, ElMessageBox } from 'element-plus'
import { TabsPaneContext } from 'element-plus'
import Insert from './insert.vue'
const emit = defineEmits(['ref-table'])
const form = ref({}) // 编辑表单数据
const VisibleModifications = ref(false) // 修改编辑信息
const JobResponsibilities = ref('') // 职位职责文本
const JobRequirements = ref('') // 职位要求文本
const DisplayPosition = ref(false) // 职位选择
const currentPage4 = ref(1)// 当前页码
const pageSize4 = ref(20)// 每页显示多少条数据
const background = ref(false) // 是否启用背景色
const disabled = ref(false) // 是否禁用分页
const onSubmit = () => { // 提交编辑表单数据
    ElMessage.success('提交成功')
}
// 表格数据加载
const js = () => {
    setTimeout(() => {
        loading.value = false;
    }, 2000)
}
//选择职位
const Position = () => {
    DisplayPosition.value = true; // 显示修改信息
    js();
}
// 
const activeName = ref('first')
// 点击标签页
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)

}
//编辑修改表格数据
const tableData = ref([
    { id: 1, DataTitle: '产品运营', Position: "产品运营", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 2, DataTitle: '产品经理', Position: "产品经理", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 3, DataTitle: '产品开发', Position: "产品开发", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 4, DataTitle: '产品测试', Position: "产品测试", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 5, DataTitle: '产品支持', Position: "产品支持", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 6, DataTitle: '产品经理', Position: "产品经理", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 7, DataTitle: '产品总监', Position: "产品总监", Section: "产品部", DepartmentHead: '爱丽丝' },
    { id: 8, DataTitle: '产品开发', Position: "产品开发", Section: "产品部", DepartmentHead: '爱丽丝' }
])
// 表格列
const columns = ref([
    { id: 'DataTitle', label: '数据标题', width: '200' },
    { id: 'Position', label: '岗位', width: '200' },
    { id: 'Section', label: '部门', width: '200' },
    { id: 'DepartmentHead', label: '部门主管', width: '200' }

])
// 加载动画
const loading = ref(true)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
      `
// 退出提示
const closeDialog = () => {
    ElMessageBox.confirm(
        '你有正在编辑的数据，确定离开？',
        '注意',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })
        })
}
const ping = () => {
    setTimeout(() => {
        loading.value = false
    }, 2000)
}
const num = ref(1) // 当前人数
//打印
const printPage = () => {
    window.print()
}
// 隐藏
const isVisible = ref(false)
// 复制添加
const add = () => {
    isVisible.value = true
    console.log("点击了");

    router.push('./insert.vue')
}
//编辑
const Editor = () => {
    VisibleModifications.value = true
}

//删除操作
const open = () => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '通知',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',

            })
            emit("ref-table")
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '取消操作',
            })
        })

}

</script>
